<template>
    <div>
        <div><el-button size="mini" type="primary" @click="dialogVisible = true">数据授权</el-button></div>
        <el-dialog
            title="数据授权"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <div style="margin-bottom: 10px">
                <el-checkbox v-model="checked1">仓管员</el-checkbox>
                <el-checkbox v-model="checked2">账号管理员</el-checkbox>
            </div>
            <div class="main">
                <div class="lie">
                    <div class="tree">
                        <div class="top">
                            <span>代理区域</span>
                        </div>
                        <div class="bottom">
                            <qu-yu></qu-yu>
                        </div>
                    </div>
                    <div class="cl">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"  style="width:100%;background: #dedede;">代理商</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                            <el-checkbox v-for="city in cities" :label="city" :key="city" style="border-top: 1px solid #dedede; ">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="lie">
                    <div class="tree">
                        <div class="top">
                            <span>集团区域</span>
                        </div>
                        <div class="bottom">
                            <qu-yu></qu-yu>
                        </div>
                    </div>
                    <div class="cl">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"  style="width:100%;background: #dedede;">集团</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                            <el-checkbox v-for="city in cities" :label="city" :key="city" style="border-top: 1px solid #dedede; ">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="lie">
                    <div class="tree">
                        <div class="top">
                            <span>品牌区域</span>
                        </div>
                        <div class="bottom">
                            <qu-yu></qu-yu>
                        </div>
                    </div>
                    <div class="cl">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"  style="width:100%;background: #dedede;">品牌</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                            <el-checkbox v-for="city in cities" :label="city" :key="city" style="border-top: 1px solid #dedede; ">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="lie">
                    <div class="tree">
                        <div class="top">
                            <span>门店区域</span>
                        </div>
                        <div class="bottom">
                            <qu-yu></qu-yu>
                        </div>
                    </div>
                    <div class="cl">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"  style="width:100%;background: #dedede;">门店</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                            <el-checkbox v-for="city in cities" :label="city" :key="city" style="border-top: 1px solid #dedede; ">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import quYu from './quyu'
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        components:{
          'quYu' : quYu
        },
        data() {
            return{
                textarea3: '',
                checked1:'',
                checked2:'',
                dialogVisible: false,
                checkAll: false,
                checkedCities: ['上海', '北京'],
                cities: cityOptions,
                isIndeterminate: true
            }
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }
    }
</script>

<style lang="less" scoped>
    .main{
        display: flex;
        flex-direction: row;
        .lie{
            border: 1px solid #dedede;
            margin-right:4px;
            flex: 1;
            display: flex;
            flex-direction: row;

            .tree{
                width: 100%;
                flex: 1;
                .top{
                    background: #dedede;
                    text-align: center;
                    line-height: 36px;
                    width: 100%;
                    height: 36px;
                }
                .bottom{

                }
            }
            .cl{
                flex:1;flex: 1;text-align: center;line-height: 36px;border-left: 1px solid #dedede;
            }
        }
    }
    .el-checkbox+.el-checkbox{
        margin-left: 0px;
    }
</style>
